<template>
  <view
    class="main-tabs_c"
  >
    <view
      class="main-tabs-item"
      :class="{ active: !mainType }"
      @tap="handleMainType(0)"
    >
      {{ main }}
    </view>
    <view
      class="main-tabs-item"
      :class="{ active: mainType }"
      @tap="handleMainType(1)"
    >
      {{ sub }}
    </view>
  </view>
</template>

<script>
export default {
  name:"MainTabsC",
  props:{
    mainType:{
      type:Number,
      default:1
    },
    main:{
      type:String,
      default:'全国'
    },
    sub:{
      type:String,
      default:'城市'
    }
  },
  methods:{
    handleMainType(type) {
      this.$emit('change',type)
    },
  }
}
</script>

<style lang="scss">
.main-tabs_c {
      padding: 15px 170px 0;
      display: flex;
      justify-content: space-between;
      .main-tabs-item {
        height: 70px;
        font-size: 32px;
        font-weight: 400;
        line-height: 50px;
        vertical-align: text-top;
        color: #303133;
        position: relative;
        &.active {
          font-size: 36px;
          font-weight: bold;
          line-height: 50px;
          color: #000000;
          &::after {
            content: ""; /*CSS伪类用法*/
            position: absolute; /*定位背景横线的位置*/
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #ff8000; /*宽和高做出来的背景横线*/
            width: 40px;
            border-radius: 200px;
            height: 8px;
          }
        }
      }
    }
</style>